<template>
  <div class="table-box">
    <div class="page-header">用户管理</div>
    <el-button type="primary" @click="handleAdd" class="addBtn"
      >新增用户</el-button
    >
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="用户编号" width="180"></el-table-column>
      <el-table-column prop="group.name" label="权限组"> </el-table-column>
      <el-table-column prop="username" label="登录名"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column prop="login_at" label="登陆时间"> </el-table-column>
      <el-table-column prop="login_ip" label="登陆IP"> </el-table-column>
      <el-table-column prop="create_time" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:8px;float:right;"
      background
      layout="prev, pager, next"
      :page-count="totalPage"
      :current-page="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>
<style>
.page-header {
  font-weight: 400;
  font-size: 28px;
  margin-bottom: 20px;
}
.addBtn {
  margin-bottom: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      users: [],
      totalPage: 1,
      currentPage: 1,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await this.$http.get("user/list", { page: this.currentPage });
      this.users = res.list;
      this.currentPage = res.currentPage;
      this.totalPage = res.totalPage;
    },
    currentChange($page) {
      this.currentPage = $page;
      this.getList();
    },
    handleEdit(idx, row) {
      this.$router.push("/user/edit/" + row.id);
    },
    handleAdd() {
      this.$router.push("/user/add");
    },
    async handleDelete(idx, row) {
      await this.$confirm(
        `此操作删除用户「${row.nickname}」, 是否继续?`,
        "提示",
        { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }
      );
      await this.$http.post("/user/remove", { id: row.id });
      this.getList();
    },
  },
};
</script>
